<template>
  <div class="app-container">
    <div class="table-box">
      <!-- 搜索区 开始 -->
      <div class="search-box">
        <el-form ref="listQuery" :model="listQuery" label-width="90px">
          <el-row>
            <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
              <el-row>
                <!-- 表单元素 开始 -->
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                  <el-form-item
                    :label="$t('adminLog.status')"
                    prop="status"
                    class="select-class"
                  >
                    <el-select
                      v-model="listQuery.status"
                      :placeholder="$t('common.pleaseSelect')"
                      clearable
                    >
                      <el-option
                        v-for="item in dictionaryService.getItems('operationStatusVar')"
                        :key="item.id"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                  <el-form-item
                    :label="$t('common.created_at')"
                    prop="created_at"
                  >
                    <el-date-picker
                      v-model="listQuery.created_at"
                      type="datetimerange"
                      :range-separator="$t('common.rangeTo')"
                      :start-placeholder="$t('common.start_time')"
                      :end-placeholder="$t('common.end_time')"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :editable="false"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                  <el-form-item :label="$t('common.keywords')" prop="keywords_value">
                    <el-input
                      v-model="listQuery.keywords_value"
                      :placeholder="$t('common.pleaseEnter')+$t('common.keywords')"
                      class="input-with-select"
                      clearable
                      @keyup.enter.native="handleFilter"
                    >
                      <el-select
                        slot="prepend"
                        v-model="listQuery.keywords_key"
                        :placeholder="$t('common.pleaseSelect')"
                        style="width: 120px"
                      >
                        <el-option
                          v-for="item in keywordKeysOptions"
                          :key="item.id"
                          :label="item.text"
                          :value="item.id"
                        />
                      </el-select>
                    </el-input>
                  </el-form-item>
                </el-col>
                <!-- 表单元素 开始 -->
              </el-row>
            </el-col>
            <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4" class="search-btn">
              <el-button
                v-waves
                type="primary"
                icon="el-icon-search"
                @click="handleFilter"
              >
                {{ $t('common.search') }}
              </el-button>
              <el-button icon="el-icon-refresh" @click="handleResetFilter">{{ $t('common.reset') }}</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 搜索区 结束 -->

      <el-table
        key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        max-height="540"
        @sort-change="sortChange"
      >
        <el-table-column
          label="ID"
          prop="id"
          sortable="custom"
          align="center"
          width="80"
          :class-name="getSortClass('id')"
        >
          <template slot-scope="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('common.user')"
          min-width="100px"
          align="center"
        >
          <template slot-scope="{ row }">
            {{ row.created_user_name }}
          </template>
        </el-table-column>

        <el-table-column :label="$t('adminLog.operation_content')" min-width="150px">
          <template slot-scope="{ row }"> {{ row.content }} </template>
        </el-table-column>

        <el-table-column
          :label="$t('adminLog.action_controller')"
          align="center"
        >
          <template slot-scope="{ row }"> {{ row.action_controller_name }} </template>
        </el-table-column>

        <el-table-column
          :label="$t('adminLog.action_method')"
          min-width="100px"
          align="center"
        >
          <template slot-scope="{ row }"> {{ row.action_method_name }} </template>
        </el-table-column>

        <el-table-column
          :label="$t('adminLog.status')"
          min-width="150px"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-tag :type="row.status ? 'success' : 'danger' ">
              {{ row.status | paraseDictionaryItemName('operationStatusVar') }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('common.created_at')"
          width="200px"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.created_at }}</span>
          </template>
        </el-table-column>

        <el-table-column type="expand" :label="$t('common.operation')" width="150" fixed="right">
          <template slot-scope="props">
            <el-form label-position="left" inline class="table-expand">
              <el-form-item :label="$t('common.user')">
                <span>{{ props.row.created_user_name }}</span>
              </el-form-item>
              <el-form-item :label="$t('adminLog.operation_content')">
                <span>{{ props.row.content }}</span>
              </el-form-item>
              <el-form-item :label="$t('adminLog.action_controller')">
                <span>{{ props.row.action_controller_name!=props.row.action_controller?props.row.action_controller_name:"" }} {{ props.row.action_controller }}</span>
              </el-form-item>
              <el-form-item :label="$t('adminLog.action_method')">
                <span>{{ props.row.action_method_name!=props.row.action_method?props.row.action_method_name:"" }} {{ props.row.action_method }}</span>
              </el-form-item>
              <el-form-item :label="$t('adminLog.request_uri')">
                <span>{{ props.row.request_uri }}</span>
              </el-form-item>
              <el-form-item :label="$t('adminLog.request_methods')">
                <span>{{ props.row.request_method }}</span>
              </el-form-item>
              <el-form-item :label="$t('adminLog.request_ip')">
                <span>{{ props.row.request_ip }}</span>
              </el-form-item>
              <el-form-item :label="$t('adminLog.request_browser')">
                <span>{{ props.row.request_browser }}</span>
              </el-form-item>
              <el-form-item :label="$t('adminLog.request_platform')">
                <span>{{ props.row.request_platform }}</span>
              </el-form-item>
              <el-form-item :label="$t('adminLog.request_parameters')">
                <span>
                  <vue-json-pretty
                    :path="'res'"
                    :deep="1"
                    :highlight-mouseover-node="true"
                    :highlight-selected-node="true"
                    :show-line="false"
                    :data="JSON.parse(props.row.request_parameters)"
                  />
                </span>
              </el-form-item>
              <el-form-item :label="$t('adminLog.response')">
                <span>
                  <vue-json-pretty
                    :path="'res'"
                    :deep="1"
                    :highlight-mouseover-node="true"
                    :highlight-selected-node="true"
                    :show-line="false"
                    :data="JSON.parse(props.row.response)"
                  />
                </span>
              </el-form-item>
              <el-form-item :label="$t('adminLog.exception')" style="display: flex;">
                <span>{{ props.row.exception }}</span>
              </el-form-item>
              <el-form-item :label="$t('adminLog.status')">
                <span>
                  <el-tag :type="props.row.status ? 'success' : 'danger' ">
                    {{ props.row.status | paraseDictionaryItemName('operationStatusVar') }}
                  </el-tag>
                </span>
              </el-form-item>
              <el-form-item :label="$t('common.created_at')">
                <span>{{ props.row.created_at }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能 开始 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
      <!-- 分页功能 结束 -->
    </div>
  </div>
</template>

<script>
import { index } from '@/api/admin-log'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'

export default {
  name: 'AdminLogIndex',
  components: { Pagination, VueJsonPretty },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        sort: '-id',
        status: '',
        keywords_key: 'created_user',
        keywords_value: '',
        created_at: []
      },
      keywordKeysOptions: [
        { id: 'created_user', text: this.$t('common.user') },
        { id: 'action_controller_name', text: this.$t('adminLog.action_controller') }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.listLoading = true
      await index(this.listQuery).then((response) => {
        this.list = response.data.items
        this.total = response.data.meta.total
        this.listLoading = false
      }).catch(() => {
        this.closeBack()
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleResetFilter() {
      this.listQuery.page = 1
      this.$refs['listQuery'].resetFields()
      this.getList()
    },
    sortChange(data) {
      const { prop, order } = data
      if (order === 'ascending') {
        this.listQuery.sort = '+' + prop
      } else if (order === 'descending') {
        this.listQuery.sort = '-' + prop
      } else {
        this.listQuery.sort = ''
      }
      this.listQuery.sort && this.handleFilter()
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      if (sort === `+${key}`) {
        return 'ascending'
      } else if (sort === `-${key}`) {
        return 'descending'
      } else {
        return ''
      }
    }
  }
}
</script>
<style scoped  lang="scss" >
</style>
